$(document).ready(function () {

    init_content();

    $(window).resize(function () {
        change_height("#headeriframe");
        change_height("#contentiframe");
        change_height("#footeriframe");
    });

    $("div.thumbnail").mouseout(function () {
        var intro = $(this).find(".flower-intro");
        intro.slideDown("fast");
    });
    $("div.thumbnail").mouseleave(function () {
        var intro = $(this).find(".flower-intro");
        intro.slideUp("fast");
    });
})

function change_height(id) {
    var height = $(id).contents().find("body").height();
    $(id).height(height);
}

function init_content() {
    var data = ' \
    <root> \
        <flower> \
            <id>1</id> \
            <name>1</name> \
            <imageurl>/images/join0.jpg</imageurl> \
            <price>1</price> \
            <intro> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.Nullam id dolor id nibh ultricies vehicula ut id elit. </intro> \
        </flower> \
        <flower> \
            <id>2</id> \
            <name>2</name> \
            <imageurl>/images/join0.jpg</imageurl> \
            <price>3</price> \
            <intro> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.Nullam id dolor id nibh ultricies vehicula ut id elit. </intro> \
        </flower> \
        <flower> \
            <id>3</id> \
            <name>3</name> \
            <imageurl>/images/join0.jpg</imageurl> \
            <price>3</price> \
            <intro> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.Nullam id dolor id nibh ultricies vehicula ut id elit. </intro> \
        </flower> \
        <flower> \
            <id>4</id> \
            <name>4</name> \
            <imageurl>/images/join0.jpg</imageurl> \
            <price>4</price> \
            <intro> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.Nullam id dolor id nibh ultricies vehicula ut id elit. </intro> \
        </flower> \
        <flower> \
            <id>5</id> \
            <name>5</name> \
            <imageurl>/images/join0.jpg</imageurl> \
            <price>5</price> \
            <intro> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.Nullam id dolor id nibh ultricies vehicula ut id elit. </intro> \
        </flower> \
        <flower> \
            <id>6</id> \
            <name>6</name> \
            <imageurl>/images/join0.jpg</imageurl> \
            <price>6</price> \
            <intro> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.Nullam id dolor id nibh ultricies vehicula ut id elit. </intro> \
        </flower> \
        <flower> \
            <id>7</id> \
            <name>7</name> \
            <imageurl>/images/join0.jpg</imageurl> \
            <price>7</price> \
            <intro> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.Nullam id dolor id nibh ultricies vehicula ut id elit. </intro> \
        </flower> \
        <flower> \
            <id>8</id> \
            <name>8</name> \
            <imageurl>/images/join0.jpg</imageurl> \
            <price>8</price> \
            <intro> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.Nullam id dolor id nibh ultricies vehicula ut id elit. </intro> \
        </flower> \
        <flower> \
            <id>9</id> \
            <name>9</name> \
            <imageurl>/images/join0.jpg</imageurl> \
            <price>9</price> \
            <intro> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.Nullam id dolor id nibh ultricies vehicula ut id elit. </intro> \
        </flower> \
        <flower> \
            <id>10</id> \
            <name>10</name> \
            <imageurl>/images/join0.jpg</imageurl> \
            <price>10</price> \
            <intro> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.Nullam id dolor id nibh ultricies vehicula ut id elit. </intro> \
        </flower>\
    </root> ';

    var i;
    var html_str = "";
    var flower = $(data).find("flower");
    for (var i = 0; i < flower.length; i++) {
        html_str += ' <div class="col-xs-6 col-md-3 col-sm-4"> \
                <div class="thumbnail"> \
                    <div class="flower-img"> \
                        <img src="'+ $(flower[i]).find("imageurl").text() +'" alt="'
                        + $(flower[i]).find("name").text()+'"> \
                        <div class="flower-intro"> '
                        + $(flower[i]).find("intro").text()+ 
                        ' </div > \
                    </div > \
            <div class="caption"> \
                <h5>'+ $(flower[i]).find("name").text()+'</h5> \
                <div class="button-group"> \
                    <a href="#" class="btn btn-primary" role="button">Buy</a> \
                    <a href="#" class="btn btn-default" role="button">Add</a> \
                </div> \
            </div> \
                </div > \
            </div > ';
    } 
            $("#content").append(html_str);




    

}
